<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="../style/weui.css"/>  <link rel="stylesheet" href="../style/weui2.css"/>
      <script src="../zepto.min.js"></script>

</head>

<body ontouchstart>
   <div class="bd spacing">
        <a href="javascript:;" class="weui_btn weui_btn_primary" id="showToast">Toast 成功</a>
        <a href="javascript:;" class="weui_btn weui_btn_primary" id="show-toast-cancel">Toast 取消</a>
        <a href="javascript:;" class="weui_btn weui_btn_primary" id="show-toast-3">Toast 警告</a>
        <a href="javascript:;" class="weui_btn weui_btn_primary" id="showLoading">Toast Loading </a>
        
         <a href="javascript:;" class="weui_btn weui_btn_primary" id="sd1">Dialog alert</a>
        <a href="javascript:;" class="weui_btn weui_btn_primary" id="sd2">Dialog  confirm</a>
        <a href="javascript:;" class="weui_btn weui_btn_primary" id="sd3">Dialog  prompt</a>
        <a href="javascript:;" class="weui_btn weui_btn_primary" id="sd4">Dialog  自定义</a>
        <a href="javascript:;" class="weui_btn weui_btn_primary" id="sd5">topTips</a>
    </div>
    
<!----------------------------------------------进度条----------------------------------->    
     <div class="bd spacing">
        <div class="weui_progress">
            <div class="weui_progress_bar">
                <div class="weui_progress_inner_bar js_progress" style="width: 0%;"></div>
            </div>
            <a href="javascript:;" class="weui_progress_opr">
                <i class="weui_icon_cancel"></i>
            </a>
        </div>
        <br>
        <div class="weui_progress">
            <div class="weui_progress_bar">
                <div class="weui_progress_inner_bar js_progress" style="width: 50%;"></div>
            </div>
            <a href="javascript:;" class="weui_progress_opr">
                <i class="weui_icon_cancel"></i>
            </a>
        </div>
        <br>
        <div class="weui_progress">
            <div class="weui_progress_bar">
                <div class="weui_progress_inner_bar js_progress" style="width: 80%;"></div>
            </div>
            <a href="javascript:;" class="weui_progress_opr">
                <i class="weui_icon_cancel"></i>
            </a>
        </div>
        <div class="weui_btn_area">
            <a href="javascript:;" class="weui_btn weui_btn_primary" id="btnStartProgress">上传</a>
        </div>
    </div>  
    
 <!------------------------------------------------->   
     <div class="bd spacing">
        <a href="javascript:;" class="weui_btn weui_btn_primary" id="sa">点击上拉ActionSheet</a>
    </div>
 <!--BEGIN actionSheet-->
    <div id="actionSheet_wrap">
        <div class="weui_mask_transition" id="mask"></div>
        <div class="weui_actionsheet" id="weui_actionsheet">
            <div class="weui_actionsheet_menu">
                <div class="weui_actionsheet_cell">中国</div>
                <div class="weui_actionsheet_cell">美国</div>
                <div class="weui_actionsheet_cell">日本</div>
                <div class="weui_actionsheet_cell">韩国</div>
            </div>
            <div class="weui_actionsheet_action">
                <div class="weui_actionsheet_cell" id="actionsheet_cancel">取消</div>
            </div>
        </div>
    </div>
    <!--END actionSheet-->   
       
    <script src="../example.js"></script>    
  <script>
 

 $(document).on("click", "#showToast", function() {
        $.toast("操作成功");
      }); 

  $(document).on("click", "#show-toast-cancel", function() {
        $.toast("取消操作", "cancel");
      });
  $(document).on("click", "#show-toast-3", function() {
        $.toast("禁止操作", "forbidden");
      });
$(document).on("click", "#showLoading", function() {
        $.showLoading();

        setTimeout(function() {
          $.hideLoading();
        }, 3000)
      });     

$(document).on("click", "#sd1", function() {
        $.alert("弹出对话框就是好", "标题");
      });
      $(document).on("click", "#sd2", function() {
        $.confirm("您确定要删除吗?", "确认删除?", function() {
          $.toast("删除成功!");
        }, function() {
          //取消操作
        });
      });
      $(document).on("click", "#sd3", function() {
        $.prompt("输入昵称看看", "你的昵称", function(text) {
          $.alert("您的昵称是:"+text, "哦");
        }, function() {
          //取消操作
        });
      });
      $(document).on("tap", "#sd4", function() {
        $.modal({
          title: "支付方式",
          text: "选择你的支付方式",
          buttons: [
            { text: "支付宝", onClick: function(){ $.alert("你选择了支付宝"); } },
            { text: "微信支付", onClick: function(){ $.alert("你选择了微信支付"); } },
            { text: "取消", className: "default"},
          ]
        });
      });      
  
   //进度条
 $(function(){
 $("#btnStartProgress").click(function(){
                    if ($(this).hasClass('weui_btn_disabled')) {
                        return;
                    }

                    $(this).addClass('weui_btn_disabled');

                    var progress = 0;
                    var $progress = $('.js_progress');

                    function next() {
                        $progress.css({width: progress + '%'});
                        progress = ++progress % 100;
                        setTimeout(next, 30);
                    }

                    next();                   
});
 
 })

//操作表
$("#sa").click(function(){
                    var mask = $('#mask');
                    var weuiActionsheet = $('#weui_actionsheet');
                    weuiActionsheet.addClass('weui_actionsheet_toggle');
                    mask.show().addClass('weui_fade_toggle').one('click', function () {
                        hideActionSheet(weuiActionsheet, mask);
                    });
                    $('#actionsheet_cancel').one('click', function () {
                        hideActionSheet(weuiActionsheet, mask);
                    });
                    weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd');

                    function hideActionSheet(weuiActionsheet, mask) {
                        weuiActionsheet.removeClass('weui_actionsheet_toggle');
                        mask.removeClass('weui_fade_toggle');
                        weuiActionsheet.on('transitionend', function () {
                            mask.hide();
                        }).on('webkitTransitionEnd', function () {
                            mask.hide();
                        })
                    }
});



   
  </script>  
   
</body>
</html>
